<script setup lang="ts">
interface Props {
  title: string;
}
defineProps<Props>();

interface Emits {
  (e: 'closeInfoWindow'): void;
}

defineEmits<Emits>();
</script>

<template>
  <div class="relative bottom-0 left-0 w-300px p-0">
    <div class="border-1px border-gray-300 rounded border-solid bg-white">
      <div class="flex items-center justify-between px-12px py-8px">
        {{ title }}
        <SvgIcon
          local-icon="material-symbols-close-rounded"
          class="cursor-pointer text-icon"
          @click="$emit('closeInfoWindow')"
        />
      </div>
      <div class="border-t-1px border-gray-300">
        <slot name="content" />
      </div>
    </div>
    <div class="flex-center">
      <div class="arrow-down"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.arrow-down {
  --at-apply: w-0 h-0 relative -top-1px;
  border-top: 8px solid #ffffff;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
</style>
